<template>
  <div class="detail">
    <el-row v-if="showCatalog">
      <el-divider content-position="left">
        <div class="middle-wrapper">
          <!-- 面包屑导航栏 -->
          <div class="breadcrumb-wrapper m-b-10">
            <span style="line-height: 1;">商品类别：</span>
            <el-breadcrumb class="app-breadcrumb" separator="/">
              <transition-group name="breadcrumb">
                <el-breadcrumb-item v-for="(item,index) in spuInfo.catalogPath" :key="'catalog_' + index">
                  <span v-if="index===spuInfo.catalogPath.length-1" class="no-redirect">{{ item }}</span>
                  <span v-else>{{ item }}</span>
                </el-breadcrumb-item>
              </transition-group>
            </el-breadcrumb>
          </div>
        </div>
      </el-divider>
    </el-row>
    <el-row :gutter="20" type="flex">
      <el-col :span="1.5" style="width: 380px;">
        <!-- 左侧轮播图片 -->
        <el-carousel height="200px" :autoplay="false" trigger="click">
          <el-carousel-item v-for="image in skuInfo.images" :key="image.id">
            <el-popover placement="right" :width="500" trigger="hover">
              <img fit="scale-down" height="400px" width="100%" :src="getImageSrc(image.imgUrl)" />
              <template #reference>
                <img fit="scale-down" height="200px" width="auto" :src="getImageSrc(image.imgUrl)" />
              </template>
            </el-popover>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col>
        <el-row style="min-height: 50px;">
          <label>{{ skuInfo.skuTitle }}</label>
        </el-row>
        <el-row v-if="skuInfo.skuSubtitle" style="min-height: 80px;" class="m-r-20">
          <span>{{ skuInfo.skuSubtitle }}</span>
        </el-row>
        <el-card shadow="hover" class="m-b-20">
          <el-row v-for="attr in attrData.saleAttrs" :key="'sale_' + attr.attrId" type="flex" class="m-t-20 m-b-10">
            <label class="m-r-20 p-t-5">{{ attr.attrName }}</label>
            <el-radio-group v-model="attr.attrValue" size="mini" @change="changeSkuInfo">
              <el-radio-button
                v-for="item in attr.attrValues"
                :key="'sale_value_' + item.attrValue"
                :label="item.attrValue"
                >
                {{ item.attrValue }}
              </el-radio-button>
            </el-radio-group>
          </el-row>
          <el-row type="flex" justify="end" align="middle" :gutter="20">
            <el-col :span="1.5">
              <label class="m-r-20 p-t-5">价格</label>
              <span class="red" style="font-size: larger">{{ skuInfo.price }}</span>
            </el-col>
            <el-col :span="1.5">
              <label class="m-r-20 p-t-5">库存</label>
              <span>{{ skuInfo.stock }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-card v-if="attrData.attrGroups.length > 0" class="w-100" shadow="hover">
      <el-tabs>
        <el-tab-pane v-for="group in attrData.attrGroups"
                     :key="group.attrGroupId"
                     :label="group.attrGroupName"
        >
          <el-table :data="group.attrs" :show-header="false" size="mini">
            <el-table-column prop="attrName" />
            <el-table-column prop="attrValue" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card v-if="spuInfo.spuDescription" class="m-t-5" shadow="hover">
      {{ spuInfo.spuDescription }}
    </el-card>
    <el-card v-if="spuInfo.introduce" class="m-t-5" shadow="hover">
      <span v-html="spuInfo.introduce" />
    </el-card>
  </div>
</template>

<script>
import { spuDetail } from '@/api/mall/product/spu'
import { skuDetail } from '@/api/mall/product/sku'

export default {
  name: 'SpuDetail',
  props: {
    spuId: {
      type: Number,
      default: function() {
        return 0
      }
    },
    showCatalog: {
      type: Boolean,
      default: function () {
        return true
      }
    }
  },
  data() {
    return {
      spuInfo: {
        catalogPath: [],
        spuDescription: undefined,
        introduce: ''
      },
      skuInfo: {
        skuId: undefined,
        skuName: undefined,
        skuTitle: undefined,
        skuSubtitle: undefined,
        images: [],
        price: undefined,
        stock: 0
      },
      attrData: {
        attrGroups: [],
        saleAttrs: []
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.spuId !== 0) {
        this.loadForm(this.spuId)
      }
    },
    loadForm(spuId) {
      this.$modal.loading('加载商品信息中...')
      this.resetInfo()
      spuDetail(spuId).then(response => {
        this.spuInfo = response.param.spuInfo
        this.skuInfo = response.param.skuInfo
        this.attrData = response.param.attrData
        this.$emit('change', this.skuInfo)
        this.$modal.closeLoading()
      }).catch(() => {
        this.$modal.closeLoading()
      })
    },
    getImageSrc(value) {
      return this.$api.getImageSrc(value)
    },
    changeSkuInfo() {
      this.$modal.loading('加载商品信息中...')
      let tempSku = []
      this.attrData.saleAttrs.forEach(attr => {
        attr.attrValues.forEach(item => {
          if (item.attrValue === attr.attrValue) {
            tempSku.push(item.skuIds.split(','))
          }
        })
      })

      let filerSku = tempSku[0]
      for (let i = 1; i < tempSku.length; i++) {
        filerSku = filerSku.filter(val => new Set(tempSku[i]).has(val))
      }

      skuDetail(filerSku.join('')).then(response => {
        this.skuInfo = response.param.skuInfo
        this.$emit('change', this.skuInfo)
        this.$modal.closeLoading()
      }).catch(() => {
        this.$modal.closeLoading()
      })
    },
    resetInfo() {
      this.spuInfo = {
        catalogPath: [],
        spuDescription: undefined,
        introduce: ''
      }
      this.resetSkuInfo()
    },
    resetSkuInfo() {
      this.skuInfo = {
        skuId: undefined,
        skuName: undefined,
        skuTitle: undefined,
        skuSubtitle: undefined,
        images: [],
        price: undefined,
        stock: 0
      }

      this.attrData = {
        attrGroups: [],
        saleAttrs: []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.middle-wrapper {
  display: flex;
  .breadcrumb {
    flex: 1;
  }
  .change-image-model {
    margin-right: 20px;
    height: 30px;
    line-height: 30px;
  }
  .breadcrumb-wrapper {
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    display: flex;
    .title, >>> .el-breadcrumb {
      height: 30px;
      line-height: 30px;
      .no-redirect {
        color: #97a8be;
        cursor: text;
      }
    }
  }
}
</style>
